/**
 * @summary: 反馈管理，页面级别
 * @author: lixinxiang@vv.cn
 */

import React, { useState, useEffect } from 'react';
import { Form, Input, Card, Table } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { fetchFeedbackList } from '@/services/feedback';
import { connect } from 'umi';
import Pagination from '@/components/Pagination';
import AdvancedSearch from '@/components/AdvancedSearch';

import useColumns from './useColumns';
import { Progress } from './containers';

const List = ({ form, dispatch }) => {
    const [loading, setLoading] = useState(true);
    const [dataSource, setDataSource] = useState([]);
    const [pagination, setPagination] = useState({});
    const [bugStatuses, setBugStatuses] = useState([]);
    const columns = useColumns(dispatch);
    const [orderBy, setOrderBy] = useState('');

    const getPayload = reset => {
        const { bugDesc, updateUser } = form.getFieldsValue();

        return {
            bugStatuses,
            orderBy,
            searchName: bugDesc || '',
            updateUser: updateUser || '',
            pageSize: pagination.pageSize || 10,
            pageNo: reset ? 1 : pagination.current
        };
    };

    const fetchData = async reset => {
        setLoading(true);
        const response = (await fetchFeedbackList(getPayload(reset))) || {};
        const { data = {} } = response;
        const { rows = [], ...rest } = data;
        setDataSource(rows);
        setLoading(false);
        setPagination({ ...rest, current: rest.pageNo });
    };

    useEffect(() => {
        fetchData();
    }, [pagination.pageSize, pagination.current, bugStatuses, orderBy]);

    /* 表格翻页获取数据 */
    const handleTableChange = async (p, f, s) => {
        let orderBys;
        let sorterField;
        if (s && s.field && s.order) {
            if (s.field === 'createTime') {
                sorterField = 'create_time';
            }
            const order = s.order.trim().split('end')[0];
            orderBys = `${sorterField} ${order}`;
        } else {
            orderBys = '';
        }
        const isSetFilter = f !== undefined;
        const isSetOderBy = s !== undefined;
        const isSetPagination = p !== undefined;

        if (isSetOderBy) {
            setOrderBy(orderBys);
        }
        if (isSetFilter) {
            setBugStatuses(f.bugStatus);
        }
        if (isSetPagination) {
            setPagination({ ...pagination, ...p });
        }
    };

    const handleSearch = () => {
        fetchData(true);
    };

    return (
        <PageHeaderWrapper>
            <Card>
                <AdvancedSearch form={form} onSubmit={handleSearch}>
                    <Form.Item label="标题">
                        {form.getFieldDecorator('bugDesc')(<Input placeholder="请输入标题" allowClear />)}
                    </Form.Item>
                    <Form.Item label="反馈人">
                        {form.getFieldDecorator('updateUser')(<Input placeholder="请输入反馈人" allowClear />)}
                    </Form.Item>
                </AdvancedSearch>
                <Table
                    rowKey="id"
                    loading={loading}
                    columns={columns}
                    dataSource={dataSource}
                    pagination={false}
                    onChange={handleTableChange}
                    scroll={{ x: 'max-content' }}
                />
                <Pagination {...pagination} onChange={handleTableChange} />
                <Progress />
            </Card>
        </PageHeaderWrapper>
    );
};

export default connect()(Form.create()(List));
